<template>
  <div v-if="indexUser">
    <!--第一版  -->
    <view class="show-img">
      <image @click="enterRoom" class="background_img" mode="center" :src="indexUser.roomPhoto">
        <view class="more">
          <view class="search">
            <image src="/static/images/icon_search.png" class="icon_search"></image>
          </view>
          <view class="add" @click='onChangeShowState'>
            <image src="/static/images/icon_add.png" class="icon_add"></image>
          </view>
          <view class="circle">
            <image src="/static/images/Oval 18@2x.png" class="icon_circle"></image>
          </view>
          <view v-if="isShowMore" class="menu" style="background: url('/static/images/Combined Shape Copy@2x.png') round;">
            <view class="top">发布动态</view>
            <view class="bottom">
              <view class="left">查看评价</view>
              <view class="right">123</view>
            </view>
          </view>

        </view>
        <view class="start" @click='playSound'>
          <view class="backgound_circle"></view>
          <view class="circle_process">
            <view class="ha">{{count}}</view>
            <!--动画-->
            <view class="wrapper right">
              <view :style="rightRotateStyle" class="circle rightcircle"></view>
            </view>
            <view class="wrapper left">
              <view :style="leftRotateStyle"  class="circle leftcircle"></view>
            </view>
          </view>
          <image src="/static/images/icon_start.png" class="icon_start"></image>
        </view>
        <view v-if="!isPlaySound" class="stop">
          <image src="/static/images/Page 1@2x的副本.png" class="icon_stop"></image>
        </view>
        <view v-if="isPlaySound" class="stop other">{{soundSeconds}}</view>
      </image>
    </view>

    <view class="information">
      <view v-if="isShowRent" class="rent_font">
        <image src="/static/images/rent.png" class="icon_rent"></image>
      </view>
      <view v-if="isShowRent" class="love" @click="like(indexUser.ownerId)">
        <image src="/static/images/love.png" class="icon_love"></image>
      </view>
      <view class="left">
        <view class="first">
          <view class="name">{{indexUser.ownerName}}</view>
          <view class="sex">
            <image src="/static/images/sex.png" class="icon_girl"></image>
          </view>
          <view class="age">
            18岁
          </view>
        </view>
        <view class="second">
          <tag v-for="(item, index) in indexUser.tagsName" :text="item" :key="index"/>
        </view>
      </view>

    </view>
    <view class="null_view"></view>
  </div>
</template>

<script>
  import tag from '@/components/tag'
  import {wxutil} from "../../utils/wxutils";
  import {api} from "../../utils/api";
  import {info} from "../../utils/userinfo";
  import {router} from "../../utils/router";
  export default {
    name: "index",
    components: {
      tag
    },
    data() {
      return {
        userInfo: null,
        homeInfo: null,
        indexUser: null,
        isPlaySound:false,
        isShowMore: false,
        isShowRent: true,
        soundSeconds: 0,
        leftRotateStyle: "transform: rotate(-135deg)",
        rightRotateStyle: "transform: rotate(-135deg)",
        maxSeconds: 15
      }
    },
    async created() {
      // wxutil.showLoading({title: "加载中...", mask:true})
      this.userInfo = await this.getUserInfo();
      this.homeInfo = await this.getIndexInfo();
      this.indexUser = this.homeInfo[0];
      wxutil.hideLoading();
    },
    methods: {
      async getUserInfo() {
        const loginRes = await wxutil.login();
        const infoRes = await wxutil.getUserInfo();
        const code = loginRes.code;
        let userInfo = infoRes.userInfo;
        const res = await api.postUserLogin(code, userInfo);
        userInfo = {...userInfo, ...res.data};
        info.setUserInfo(userInfo);
        return info.getUserInfo();
      },
      async getIndexInfo() {
        const res = await api.getUserHome();
        return res.data;
      },
      playSound:function(){
        this.isPlaySound = !this.isPlaySound;
        this.playRotateAnimation();
      },
      enterRoom: function () {
        router.toRoom(this.indexUser.ownerId)
      },
      like: function (uid) {
          api.like(uid);
      },
      // display事件
      onChangeShowState: function () {
        this.isShowMore = !this.isShowMore;
      },
      //动画
      playRotateAnimation: function () {
        if(this.intervalAni) {
          this.stopTime();
          this.stopAni()
        } else {
          this.start();
        }
      },
      stopTime() {
        clearInterval(this.intervalTime);
        this.intervalTime = null;
        this.isPlaySound = false;
      },
      stopAni() {
        clearInterval(this.intervalAni);
        this.intervalAni = null;
        this.leftRotateStyle = "transform: rotate(-135deg)"
        this.rightRotateStyle = "transform: rotate(-135deg)"
      },
      start() {
        this.angle = 0;
        this.soundSeconds = this.maxSeconds;
        this.computedAnimation();
        this.intervalAni = setInterval(this.computedAnimation, this.maxSeconds * 1000 / 360);
        this.intervalTime = setInterval(()=>{
          this.soundSeconds--;
          if(this.soundSeconds ===0) {
            this.stopTime();
          }
        }, 1000)
      },
      computedAnimation () {
        this.angle++;
        if(this.angle < 180){
          this.rightRotateStyle = "transform: rotate("+ (-135 + this.angle) + "deg)";
          this.leftRotateStyle = "transform: rotate(-135deg)";
        } else {
          this.rightRotateStyle = "transform: rotate(45deg)";
          this.leftRotateStyle = "transform: rotate("+ (-135 + this.angle + 180) + "deg)";
        }
        if(this.angle === 360) {
          this.stopAni();
        }
      }
    },
    computed: {

    }
  }
</script>

<style scoped>
  /*第一版  */

  /*图片展示  */

  .show-img {
    width: 100%;
    height: 894rpx;
    background: pink;
    position: relative;
    z-index: 15;
  }
  .background_img{
    width: 100%;
    height:894rpx;
  }

  .more {
    width: 100%;
    height: 48rpx;
    position: absolute;
    z-index: 18;
    top: 30rpx;
  }

  .more .search {
    float: left;
    width: 48rpx;
    height: 48rpx;
    margin-left: 30rpx;
  }

  .more .add {
    float: right;
    height: 48rpx;
    margin-right: 30rpx;
  }

  .menu {
    width: 194rpx;
    height: 152rpx;
    position: absolute;
    top: 46rpx;
    right: 30rpx;
  }

  .menu .top {
    width: 100%;
    height: 80rpx;
    font-size: 28rpx;
    padding: 30rpx 56rpx 10rpx 26rpx;
    box-sizing: border-box;
    border-bottom: 1rpx solid #eee;
    color: #fff;
  }
  .menu .bottom .left{
    float:left;
  }
  .menu .bottom .right{
    float:left;
  }
  .menu .bottom {
    width: 100%;
    height: 66rpx;
    font-size: 28rpx;
    padding: 8rpx 0rpx 18rpx 26rpx;
    color: #fff;
  }

  .circle {
    position: absolute;
    top: -22rpx;
    right: 24rpx;
  }

  .icon_circle {
    width: 20rpx;
    height: 20rpx;
  }

  .start {
    position: absolute;
    z-index: 18px;
    bottom: -70rpx;
    right: 80rpx;
    width: 140rpx;
    height: 140rpx;
  }
  .circle_process {
    z-index: 23;
    top: 20rpx;
    right: 20rpx;
    position: absolute;
    width: 100rpx;
    height: 100rpx;
  }

  .circle_process .wrapper {
    width: 50rpx;
    height: 100rpx;
    position: absolute;
    top: 0;
    overflow: hidden;
  }

  .circle_process .right {
    right: 0;
  }

  .circle_process .left {
    left: 0;
  }

  .circle_process .circle {
    height: 88rpx;
    width: 88rpx;
    border: 6rpx solid transparent;
    border-radius: 50%;
    position: absolute;
    top: 0;
  }

  .circle_process .rightcircle {
    border-top: 6rpx solid #fff;
    border-right: 6rpx solid #fff;
    right: 0;
    /*-webkit-animation: circle_right 10s linear infinite;*/
    transform: rotate(-135deg);
  }

  .circle_process .leftcircle {
    border-bottom: 6rpx solid #fff;
    border-left: 6rpx solid #fff;
    left: 0;
    transform: rotate(-135deg);
    /*-webkit-animation: circle_left 10s linear infinite;*/
  }

  .backgound_circle {
    position: absolute;
    z-index: 22;
    top: 20rpx;
    right: 20rpx;
    width: 88rpx;
    height: 88rpx;
    border: 6rpx solid #cf3b4d;
    border-radius: 50%;
  }

  .stop {
    position: absolute;
    z-index: 20px;
    bottom: -35rpx;
    right: 120rpx;
    text-align: center;
    color: #fff;


  }
  .other{
    width:52rpx;
    height:46rpx;
    text-align: center;
    line-height: 46rpx;
    position: absolute;
    z-index: 20px;
    bottom: -20rpx !important;
    right: 128rpx !important;
    color: #fff;
  }
  .icon_add {
    width: 48rpx;
    height: 48rpx;
  }

  .icon_search {
    width: 48rpx;
    height: 48rpx;
  }

  .icon_start {
    width: 140rpx;
    height: 140rpx;
  }

  .icon_stop {
    width: 46rpx;
    height: 52rpx;
  }

  /*信息展示  */

  .information {
    width: 100%;
  }

  /*左边信息部分  */

  .information .left {
    width: 70%;
  }

  /*信息第一层  */

  .information .left .first {
    width: 100%;
    height: 56rpx;
  }

  .information .left .first .name {
    height: 56rpx;
    margin-left: 32rpx;
    margin-right: 20rpx;
    font-size: 40rpx;
    margin-top: 40rpx;
    float: left;
    color: #333;
  }

  .information .left .first .sex {
    float: left;
    height: 56rpx;
    margin-top: 40rpx;
  }
  .information .left .first .age {
    margin-left: 20rpx;
    font-size: 28rpx;
    margin-top: 48rpx;
    float: left;
    color: #333;
  }
  .icon_girl {
    padding-top:5rpx;
    width:44rpx;
    height:44rpx;

  }

  /*信息第二层  */

  .second {
    /*width: 60%;*/
    height: 40rpx;
    margin-top: 40rpx;
    margin-left: 32rpx;
  }
  .tag {
    padding:0rpx 12rpx 0rpx 14rpx;
    margin-top: 20rpx;
    text-align: center;
    font-size: 24rpx;
    color: #333;
    height: 40rpx;
    float: left;
    border: 2rpx solid #666;
    border-radius: 8rpx;
    margin-right: 20rpx;
    line-height: 40rpx;
  }

  .rent_font {
    position: absolute;
    top: 978rpx;
    right: 186rpx;
    width: 73rpx;
    height: 72rpx;
    border-radius: 50%;
    border: 1rpx solid #ff6d6d;
  }

  .love {
    position: absolute;
    top: 978rpx;
    right: 48rpx;
    width: 73rpx;
    height: 72rpx;
    border-radius: 50%;
    border: 1rpx solid #ff6d6d;
  }

  .icon_rent, .icon_love {
    width: 42rpx;
    height: 36rpx;
    margin-top: 20rpx;
    margin-left: 16rpx;
  }

  /*右边图片  */
  .information .right {
    width: 30%;
    float: right;
  }

  content_text {
    width: 194rpx;
    height: 152rpx;
    background: red;
    position: relative;
    z-index: 99;
    left: 26rpx;
    top: 74rpx;
  }



</style>
